<template>
  <div id="UserManagement">
    <TableCard :title="false">
      <LVxeTable
        ref="xGrid"
        slot="table-card"
        :grid-options="gridOptions"
        :insert-row="gridOptions.rowDefault"
        :from-options="fromOptions"
        :role-options="sysRoleList"></LVxeTable>
    </TableCard>
  </div>
</template>

<script>
import TableCard from '@/components/Card/TableCard'
import VexTable from '@/components/Table/Vex-Table'
import LVxeTable from '@/components/LVxeTable/LVxeTable'
import { getSelectOptions, getUserList } from '@/api/system'
import qs from 'qs'

export default {
  name: 'UserManagement',
  components: { LVxeTable, TableCard, VexTable },
  data () {
    return {
      sysRoleList: [],
      fromOptions: {},
      gridOptions: {
        keepSource: true,
        border: true,
        resizable: true,
        showOverflow: 'tooltip',
        loading: false,
        height: 600,
        exportConfig: {},
        // 搜索表单配置
        formConfig: {
          titleWidth: 100,
          titleAlign: 'right',
          items: [
            { field: 'username', title: '用户名', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入用户名' } } },
            { field: 'nickname', title: '昵称', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },
            { field: 'email', title: '邮箱', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入邮箱' } } },
            { field: 'mobile', title: '手机号', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入手机号' } }
            },
            {
              span: 24,
              align: 'center',
              collapseNode: true,
              itemRender: {
                name: '$buttons',
                children: [{
                  props: {
                    type: 'submit',
                    content: '搜索',
                    status: 'primary'
                  }
                }, { props: { type: 'reset', content: '重置' } }]
              }
            }
          ]
        },
        // 工具栏按钮区配置
        toolbarConfig: {
          custom: true,
          export: true,
          zoom: true,
          slots: {
            buttons: 'toolbar_buttons'
          }
        },
        // 列配置
        columns: [],
        // data: [],
        pagerConfig: {
          pageSize: 10,
          pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000]
        },
        editConfig: {
          // // 显示修改状态和新增状态
          // showStatus: true,
          // 自定义可编辑列头的图标
          icon: 'fa fa-file-text-o'
        },
        // 数据代理
        proxyConfig: {
          seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
          form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
          props: {
            // 自定义响应结果读取的字段，例如返回结果为：{result: [], page: {total: 10}}
            result: 'result',
            total: 'page.total'
          },
          ajax: {
            // 接收 Promise
            query: ({ page, form }) => {
              this.gridOptions.loading = true
              const { currentPage, pageSize } = page
              console.log('form', form)
              const pageParams = {
                size: pageSize,
                current: currentPage,
                username: form.username,
                nickName: form.nickname,
                email: form.email,
                mobile: form.mobile
              }
              console.log('pageParams', pageParams)
              return new Promise(resolve => {
                getUserList(qs.stringify(pageParams)).then(response => {
                  this.gridOptions.loading = false
                  const { records, total } = response.data.data
                  console.log('getUserList', response.data.data)
                  for (var record of records) {
                    record.roleIds = record.roleIds.map((item) => item)
                  }
                  resolve({
                    page: {
                      total: total
                    },
                    result: records
                  })
                })
              })
            }
          }
        },
        rowDefault: {
          nickname: 'T8', role: 'Develop', sex: 'Man', phone: 35, department: 'Shenzhen'
        }
      }
    }
  },
  created () {
    this.getData()
  },
  mounted () {
  },
  methods: {
    getData () {
      this.gridOptions.loading = true
      getSelectOptions().then(res => {
        console.log('sysRoleList', res.data.data)
        res.data.data.map((item) => {
          this.sysRoleList.push({ value: item.id, label: item.name })
        })
      })
      this.gridOptions.columns = [
        { type: 'seq', width: 50, title: '序号' },
        { field: 'username', title: '用户名' },
        { field: 'nickName', title: '昵称' },
        { field: 'mobile', title: '手机号码' },
        { field: 'email', title: '邮箱' },
        {
          field: 'roleIds',
          title: '角色',
          editRender: { name: '$select', props: { multiple: true }, options: this.sysRoleList }
        },
        { title: '操作', width: 200, slots: { default: 'operate' } }
      ]
      // console.log(this.gridOptions.columns)
      // this.$refs.xGrid.initSelectOptions()
    }
  }
}

</script>

<style scoped>

</style>
